<template>
  <div>
    <el-card class="box-card">
      <!-- 公司名称 -->
      <div class="tite">
        <span>传智教育</span>
        <span>
          负责人
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="onAddDeparment()">添加子部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
      <!-- 部门树 -->
      <el-tree
     :data="departmentTree"
     :props="{ children: 'children',label: 'name'}"
     default-expand-all
    >
    <!-- 操作 -->
    <template  v-slot="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          {{ data.manager }}
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="onAddDeparment(data)">添加子部门</el-dropdown-item>
              <el-dropdown-item @click.native="onEditDpartment(data.id)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="onDeleteDpartment(data.id)">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </span>
    </template>

      </el-tree>

      <!-- 新增部门 -->
      <el-dialog
        title="新增部门"
        :visible.sync="addDpartmentVisible"
        width="600"
      >
        <el-form ref="departmentForm" :model="departmentForm" label-width="100px" :rules="rules" class="demo-ruleForm" >
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="departmentForm.name" placeholder="1-50个字符"></el-input>
          </el-form-item>
          <el-form-item label="部门编码" prop="code">
            <el-input v-model="departmentForm.code" placeholder="1-50个字符"></el-input>
          </el-form-item>
          <el-form-item label="部门负责人" >
            <el-select v-model="departmentForm.manager" placeholder="请选择负责任人" @click.native="onManager">
              <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.username" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门介绍" prop="introduce">
            <el-input type="textarea" v-model="departmentForm.introduce" placeholder="1-300个字符"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDpartmentVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDpartmentOk">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑部门 -->
      <el-dialog
        title="新增部门"
        :visible.sync="editDpartmentVisible"
        width="600"
      >
        <el-form ref="departmentForm" :model="departmentForm" label-width="100px" :rules="rules" class="demo-ruleForm" >
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="departmentForm.name" placeholder="1-50个字符"></el-input>
          </el-form-item>
          <el-form-item label="部门编码" prop="code">
            <el-input v-model="departmentForm.code" placeholder="1-50个字符"></el-input>
          </el-form-item>
          <el-form-item label="部门负责人" >
            <el-select v-model="departmentForm.manager" placeholder="请选择负责任人" @click.native="onManager">
              <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.username" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门介绍" prop="introduce">
            <el-input type="textarea" v-model="departmentForm.introduce" placeholder="1-300个字符"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDpartmentVisible = false">取 消</el-button>
          <el-button type="primary" @click="editDpartmentOk">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除部门 -->
      <el-dialog
        title="提示"
        :visible.sync="deleteDpartmentVisible"
        width="400"
      >
        <span>您是否确定要删除该部门吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDpartmentVisible = false">取 消</el-button>
          <el-button type="primary" @click="onDeleteDpartmentOk">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
let currentId = null;
import{  mapActions, mapState, mapGetters } from 'vuex';
import * as departmentApi from '../../api/department';
export default {
  data() {
    return {
      addDpartmentVisible: false,
      deleteDpartmentVisible: false,
      editDpartmentVisible: false,
      departmentForm: {
        name: '',
        introduce: '',
        manager: '',
        code: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
         code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
         introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
        ],
      },

    };
  },
  computed: {
    ...mapGetters('department', ['departmentTree']),
    ...mapState('department', ['managerList', 'departmentDetail'])
  },
  methods: {
    ...mapActions('department', ['updateDepartmentList', 'updateManagerList', 'updateDepartmentDetail']),
    onAddDeparment(data) {
      this.addDpartmentVisible = true;
      if(data) {
        currentId = data.id;
      }else{
        currentId = '';
      }

    },
    onManager() {
      this.updateManagerList()
    },
    async addDpartmentOk() {
      this.addDpartmentVisible = false;
      await departmentApi.addDepartment({
        ...this.departmentForm,
        pid: currentId
      })
        .then(msg => this.$message.success(msg))
        .catch(err => this.$message.error(err))

      this.departmentForm = {};
      this.updateDepartmentList()
    },
    onDeleteDpartment(id) {
      this.deleteDpartmentVisible = true;
      currentId = id;
    },
    async onDeleteDpartmentOk() {
      await departmentApi.deleteDepartment(currentId)
        .then(msg => this.$message.success(msg))
        .catch(err => this.$message.error(err))
      this.deleteDpartmentVisible = false;
      this.updateDepartmentList()
    },
    async onEditDpartment(id) {
      this.editDpartmentVisible = true;
      currentId = id,
      await this.updateDepartmentDetail(id);
      this.departmentForm.name = this.departmentDetail.name,
      this.departmentForm.introduce = this.departmentDetail.introduce,
      this.departmentForm.manager = this.departmentDetail.manager
      this.departmentForm.code = this.departmentDetail.code
    },
    async editDpartmentOk() {
      await departmentApi.editDepartment({
        ...this.departmentForm,
        id: currentId,
      })
        .then(msg => this.$message.success(msg))
        .catch(err => this.$message.error(err))
      this.editDpartmentVisible = false;
      this.updateDepartmentList()
    },

  },
  created() {
    this.updateDepartmentList()
  }
}
</script>

<style lang="scss" scoped>


 .tite{
    display: flex;
    justify-content: space-between;
    padding-right: 8px;
    font-size: 14px;
  }
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }


</style>
